<template>
  <div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xs">
      <div class="modal-content">
        <div class="modal-header">
          <i class="icon icon-modal-close" @click="close()"></i>
          <span class="modal-title">修改资料</span>
        </div>
        <div class="modal-body">
          <form class="form-horizonal">
            <div class="form-group">
              <label class="label">手机号：</label>
              <input class="form-control col-lg-8">
            </div>
            <div class="form-group">
              <label class="label">原密码：</label>
              <input class="form-control col-lg-8">
            </div>
            <div class="form-group">
              <label class="label">新密码：</label>
              <input class="form-control col-lg-8">
            </div>
            <div class="form-group">
              <label class="label">重复密码：</label>
              <input class="form-control col-lg-8">
            </div>
            <div class="form-group">
              <label class="label">昵称/公司名：</label>
              <input class="form-control col-lg-8">
            </div>
            <div class="form-group">
              <label class="label">邮箱：</label>
              <input class="form-control col-lg-8">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger btn-sm" @click="close()">关闭</button>
          <button type="button" class="btn btn-primary btn-sm">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    close() {
      this.$store.commit("setDialogStatus", {
        dialog: "setPersonalDialog",
        isBoolean: false
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-group {
  display: flex;
}
.label {
  text-align: right;
  width: 120px;
}
</style>
